<template>
  <view class="container">
    <view class="item">
      <view class="title"><text style="color: red">*</text>问题描述：</view>
      <uni-easyinput type="textarea" placeholder="请输入问题描述" v-model="problem"></uni-easyinput>
    </view>
    <view class="item">
      <view class="title"><text style="color: red">*</text>请上传问题截图（最多限4张）</view>
      <uni-file-picker
        ref="upload"
        v-model="showImageVal"
        fileMediatype="image"
        mode="grid"
        fileExtname="jpg,png"
        :limit="4"
        :autoUpload="false"
        @select="handleSelectImage"
      />
    </view>
    <button type="primary" @click="handleSubmit">提交</button>
    <view class="info">注：问题将在五个工作日之内答复，请注意查收邮件</view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { CreateProblem } from '@/apis/help.js'

  const problem = ref('')
  const imageVal = ref([])
  const showImageVal = ref([])
  const uploadedURL = ref([])

  function handleSelectImage(e) {
    if (e.tempFiles[0].size > 10 * 1024 * 1024) {
      uni.showToast({
        title: '图片不能大于10M',
        position: 'bottom'
      })
      return
    }
    const temp = e.tempFiles[e.tempFiles.length - 1]
    // console.log(temp)
    showImageVal.value = showImageVal.value.concat(temp)
    imageVal.value = imageVal.value.concat(e.tempFilePaths)
    // console.log(imageVal.value);
  }

  function handleSubmit() {
    if (problem.value === '') {
      uni.showToast({
        icon: 'error',
        title: '问题描述不能为空'
      })
      return
    }
    if (showImageVal.value.length === 0) {
      uni.showToast({
        icon: 'error',
        title: '请上传问题图片'
      })
      return
    }
    // console.log(imageVal.value);
    // 图片上传
    new Promise((resolve, reject) => {
      imageVal.value.forEach((item) => {
        // console.log(item);
        uni.uploadFile({
          url: 'https://image.dcwedu.top/api/index.php',
          filePath: item,
          name: 'image',
          formData: {
            token: '8337effca0ddfcd9c5899f3509b23657'
          },
          success: ({ data }) => {
            data = JSON.parse(data)
            if (data.code !== 200) {
              uni.showToast({
                icon: 'error',
                title: data.message
              })
              return
            } else {
              uploadedURL.value.push(data.url)
              // console.log(uploadedURL.value);
            }
          },
          fail: (err) => {
            console.log('图片上传失败：', err)
            reject()
          },
          complete: () => {
            if (uploadedURL.value.length === imageVal.value.length) {
              resolve()
            }
          }
        })
      })
    }).then(() => {
      console.log(uploadedURL.value)
      // 调用接口
      CreateProblem({
        problem: problem.value,
        imageURL: JSON.stringify(uploadedURL.value)
      }).then((res) => {
        uni.showToast({
          icon: 'success',
          title: '提交成功'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      })
    })
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 0 20rpx;

    .item {
      margin-bottom: 20rpx;

      .title {
        font-size: 24rpx;
        color: #000;
        margin-bottom: 10rpx;
      }
    }

    .info {
      margin-top: 20rpx;
      font-size: 24rpx;
      color: #666;
    }
  }
</style>
